<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【题型】：
          {{
            this.newList.questionType === "1"
              ? "单选"
              : this.newList.questionType === "2"
              ? "多选"
              : "简答"
          }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【编号】：{{ this.newList.id }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【难度】：
          {{
            this.newList.difficulty === "1"
              ? "简单"
              : this.newList.difficulty === "2"
              ? "一般"
              : "困难"
          }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【标签】：{{ this.newList.tags  }}
        </div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【学科】：{{ this.newList.subject }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【目录】：{{ this.newList.catalogID
}}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【方向】：{{ this.newList.direction }}
        </div></el-col
      >
    </el-row>
    <el-divider></el-divider>

    <el-row :gutter="20">
      <el-col :span="20"
        ><div class="grid-content bg-purple">
          【题干】：
          <p style="color: blue">{{ this.newList.question }}</p>
        </div>
        <!-- 选框 -->
        <div
          v-if="
            this.newList.questionType === '1' ||
            this.newList.questionType === '2'
          "
        >
          <el-radio
            v-model="radio"
            style="display: block"
            class="radio"
            v-for="item in this.newList.options"
            :key="item.id"
            :label="item.isRight"
          >
            {{ item.title }}
          </el-radio>
        </div>

      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="20"
        ><div class="grid-content bg-purple">
          【参考答案】：
          <el-button type="danger" @click="video = true"
            >视频答案预览
          </el-button>
          <!-- 视频播放 -->
          <div v-if="video">
            <video
              id="video"
              controls
              width="800"
              height="480"
              autoplay="autoplay"
            >
              <source :src="this.newList.videoURL" type="video/mp4" />
            </video>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="20"
        ><div class="grid-content bg-purple">
          【答案解析】：{{ this.newList.answer }}
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="20"
        ><div class="grid-content bg-purple">
          【题目备注】：{{ this.newList.remarks }}
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { questionType } from '@/api/hmmm/constants'
// import { detail } from '@/api/hmmm/questions'
export default {
  name: 'AA',
  props: {
    newList: {
      type: Object,
      default: () => ({})
    }

  },

  data () {
    return {
    //   isNext: Boolean, // 传的参
      // questionType, // 题型
    //   newList: {

      //   },
      video: false, // 控制视频的显示与隐藏
      radio: 1
      // isRight: '0'
    }
  }
//   created () {
//     // 调用获取基础题库详情的方法
//     this.detail()
//   }
//   methods: {
//     // 获取基础题库详情
//     async detail () {
//       const res = await detail({ id: this.topicId })
//       // console.log(res)
//       this.newList = res.data
//     }
//   }
}
</script>

<style scoped lang='scss'>
label.el-radio.radio {
  margin-bottom: 15px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 5px 0;
  background-color: #f9fafc;
}
.el-divider.el-divider--horizontal {
  margin: 15px 0;
}
</style>
